<template>
  <view>
    <view class="inputWrapper">
      <u-search
        bg-color="#e7e7e7"
        height="60"
        placeholder="请输入搜索文字"
        v-model="keyword"
        :action-style="searchBtnStyle"
        @search="submitSearch"
        @custom="submitSearch"
      ></u-search>
    </view>
    <GoodsItem
      v-for="item in  goodsList"
      :key="item.goods_id"
      :data="item"
    />
  </view>
</template>

<script>
  import GoodsItem from '../goods_list/components/GoodsItem.vue'
  export default {
    components: {GoodsItem},
    data() {
      return {
        keyword: "",
        goodsList: [],
        searchBtnStyle: {
          fontSize: '26rpx',
          padding: '0 26rpx',
          width: '100rpx',
          background: '#EA4350',
          lineHeight: '60rpx',
          color: '#fff',
          borderRadius: '10rpx'
        }
      };
    },
    onLoad() {
      // 不参与渲染的全局变量
      this.totalPage = 0
      this.params = {
        cid: '',
        query: '',
        pagenum: 1,
        pagesize: 10
      }
    },
    onReachBottom() {
      console.log('到底了啊');

      // 拉到底的时候, 看看是不是已经最后一页
      if (this.totalPage === this.params.pagenum) {
        uni.showToast({title:'别再拉拉扯扯', icon: 'none'})
        return
      }
     
      // 1. 翻页, 页码加一
      this.params.pagenum ++
      // 2. 发送请求
      this.getGoods()
      // 3. 数据处理 不是在这写, 而是改一下加载时的逻辑
    },
    methods: {
      submitSearch() {
        console.log('开始搜索');
        // 新的搜索要清空原来的配置和结果
        this.totalPage = 0
        this.params = {
          cid: '',
          query: '',
          pagenum: 1,
          pagesize: 10
        }
        this.goodsList = []
        this.params.query = this.keyword
        this.getGoods()
      },
      async getGoods() {
        const {message} = await this.$u.get('/goods/search', this.params)
        // 为了避免图片数据为 null 页面报错, 可以考虑那完数据, 现将所有图片地址
        // 是 null 都给复制一个 空字符串
        this.goodsList = [...this.goodsList, ...message.goods]
        
        // 拿到数据我们算一下总页数
        this.totalPage = Math.ceil(message.total / this.params.pagesize)
      }
    }
  };
</script>

<style lang="scss" scoped>
  .inputWrapper {
    padding: 20rpx;
  }
</style>